
import React from 'react'
import { InputNumber, InputNumberProps } from 'antd';
import './forms.scss'
import { useFormItemInit } from './hooks';
import { FormItemBaseProps } from './interface';
import { useDrag } from './drop.hooks';
import Readonly from './Readonly';
import { Utils } from '../../utils/utils';
import { Components } from '../..';




interface IProps extends FormItemBaseProps {
}
export default function MyCurrency(props: IProps) {
    const { formControl, className = '', style = {} } = props;
    const {
        value, setValue,
        readonly,
        outerClassName,
        layout,
        showError,
        outerStyle,
        labelStyle,
        placeholder,
        selectorStyle,
    } = useFormItemInit(formControl, className, style);

    if (isNaN(value)) {
        setValue(null);
    }

    /** 显示文本内容 */
    const [showText, setShowText] = React.useState(true);

    const [currencyplaceholder] = React.useState(placeholder || '请输入');

    React.useEffect(() => {
        // setShowText(!readonly);
    }, [readonly]);

    const onChange = (value: number | string | null) => {
        value = value ?? '';
        setValue(value);
        formControl.setValue(value);
    };

    const onFocus = () => {
        setShowText(false);
    };

    const onBlur = () => {
        setShowText(true);
    };

    const inputProps: InputNumberProps = {
        onChange: onChange,
        prefix: formControl.controlData.prefix,
        addonAfter: formControl.controlData.suffix ?? undefined,
        size: formControl.controlData.size ?? 'middle', // large | middle | small
        className: 'currency',
        controls: false,
        value: value,
        placeholder: currencyplaceholder,
        maxLength: formControl.controlData.inputMaxlength,
        onFocus: onFocus,
        onBlur: onBlur,
        disabled: readonly,
        status: showError ? 'error' : undefined,
        style: selectorStyle,
    }

    /** 拖拽排序 */
    const dropRef = React.useRef<HTMLDivElement>(null);
    useDrag({ dropRef, formControl });

    /** 设置宽度 */
    const inputNumberRef = React.useRef<HTMLInputElement>(null);
    const [width, setWidth] = React.useState(100);
    React.useEffect(() => {
        // console.log(inputNumberRef );
        const inputEle: HTMLInputElement = inputNumberRef.current!;
        if (!Utils.isEmpty(inputEle)) {
            const w = inputEle.clientWidth;
            setWidth(w - 2);
        }
    }, []);

    /** 显示格式化文本的 className */
    const [currencyClassName, _setCurrencyClassName] = React.useState('currency-text' + (readonly ? ' readonly' : ''));

    return (
        <div component-name='form-item' className={outerClassName} style={outerStyle} ref={dropRef}>
            <div className={`field ${layout}`}>
                <Components.forms.FormLabel formControl={formControl} style={labelStyle} />
                <div className='control'>
                    <div className="value currency-value">
                        {
                            readonly ? <Readonly formControl={formControl} /> : <>
                                <InputNumber {...inputProps} ref={inputNumberRef} />
                                {
                                    showText && <div className={currencyClassName} style={{ width: width }}>
                                        {
                                            Utils.moneyFormat(+value, '', 2)
                                        }
                                    </div>
                                }
                            </>
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
